import {
  Directive,
  ElementRef,
  Renderer2,
  OnInit,
  HostBinding,
  HostListener,
} from '@angular/core';

@Directive({
  selector: '[appGridItem]',
})
export class GridItemDirective implements OnInit {
  @HostBinding('style.display') display: string = 'grid';
  @HostBinding('style.width') width: string = '4rem';
  constructor(private el: ElementRef, private rd2: Renderer2) {}
  ngOnInit(): void {
    /**
     * 指令样式上的绑定也可以使用@HostBinding注解
     *
     * 下面是通过rd2进行样式修改
     */

    // this.rd2.setStyle(this.el.nativeElement, 'display', 'grid');
    // this.rd2.setStyle(this.el.nativeElement, 'width', '4rem');
    this.rd2.setStyle(
      this.el.nativeElement,
      'grid-template-areas',
      "'image' 'title'"
    );
    this.rd2.setStyle(this.el.nativeElement, 'place-items', 'center');
  }
  // 监听click事件，第一个参数是事件名字，第二个参数是一个字符串数组，这里表示将$event.target传入到ev
  // 不需要在dom节点上面添加其他东西，因为已经dom节点有了appGridItem属性<div class="item-container" appGridItem></div>
  // @HostListener('click', ['$event.target'])
  // handelClick(ev: any) {
  //   console.log(ev);
  // }
}
